<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>火龙果花样饭团</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        ul li {
            list-style: none;
        }

        #shouye {
            width: 100%;
            min-width: 1200px;

        }

        #head {
            width: 80%;
            height: 80px;
            background-color: white;
            margin: 0 auto;
            /* background-color: yellow; */
        }

        #logo {
            /* background-color: red; */
            width: 30%;
            height: 80px;
            float: left;
            position: relative;
            left: 10px;
        }

        #headleft {
            width: 50%;
            float: left;
            height: 80px;
            /* background-color: yellow; */
        }

        #headleft1 {
            height: 80px;
            line-height: 80px;
        }

        #textword {
            width: 250px;
            height: 30px;
        }

        #textsearch {
            width: 50px;
            height: 35px;
            border: 1px solid #ccc;
            background: url(images/serach.jpg);
        }

        /*背景图  */
        #login {
            text-decoration: none;
            color: #407434;
        }

        #login img {
            width: 20px;
            height: 80px;
        }

        #headright {
            height: 80px;
            line-height: 80px;
            text-align: center;
        }

        /* 注销按钮 */
        #loginName,
        #unregister {
            display: none;
        }

        #unregister {
            height: 25px;
            width: 50px;
            border: none;
            outline: none;
            border-radius: 5px;
            background: linear-gradient(rgb(160, 191, 124), rgb(101, 147, 74));
            box-shadow: 0 0 3px rgb(64, 116, 52);
            cursor: pointer;
            color: white;
        }

        #bodynav {
            width: 100%;
            height: 60px;
            background-color: rgb(160, 190, 117);
            /* background-color: red; */
        }

        #nav {
            width: 80%;
            height: 60px;
            margin: 0 auto;
            background-color: rgb(160, 190, 117);
            /* background-color:pink; */
        }

        #nav li {
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 20px;
            width: 20%;
            float: left;
        }

        #nav a {
            color: grey;
            font-weight: bold;
        }

        #nav a:hover {
            color: #407434;
            font-weight: bold;
        }

        #foot ul li,
        #middle ul li {
            float: left;
        }

        span {
            margin-left: 30px;
            height: 30px;
            font-size: 18px;

        }

        #choose {
            width: 500px;
            display: none;
        }

        #pep {
            list-style: none;
            margin-left: 80px;
        }

        #pep dd {
            width: 100px;
            height: 50px;
            line-height: 50px;
            background-color: rgba(230, 230, 230, 0.6);
            font-size: 14px;
            position: relative;
        }

        #pep dd a {
            color: grey;
        }

        #updown {
            width: 500px;
            display: none;
        }

        #up {
            list-style: none;
            margin-left: 80px;
        }

        #up dd {
            width: 100px;
            height: 50px;
            line-height: 50px;
            background-color: rgba(230, 230, 230, 0.6);
            font-size: 14px;
            position: relative;
        }

        #up dd a {
            color: grey;
        }

        h3 {
            font-size: 20px;
            width: 70%;
            text-align: center;
        }

        .quanbu ul li {
            margin-top: 20px;
            text-indent: 2em;
            font-size: 20px;
        }

        .quanbu {
            width: 70%;
            /* height: 600px; */
            background-color: #fff;
            /* box-shadow: 5px 5px 5px; */
            border: 1px solid black;
            margin: 0 auto;
            margin-top: 50px;
        }

        .quanbu img {
            width: 200px;
            height: 80px;
            transform: rotate(-15deg);
            box-shadow: 3px 3px 3px 1px black;

        }
        
        #icon {
            float: left;
            width: 99%;
            margin: 10px auto;
            border: 1px solid #ccc;
            margin-top: 50px;
        }

        #icon div {
            float: right;
            width: 7%;
        }

        #icon div i {
            position: relative;
            left: 20%;
            margin-left: 10px;
        }

        #icon i:hover {
            color: orangered !important;
            cursor: pointer;

        }

        #likeNum {
            font-size: 20px;
        }

        #comments {
            float: left;
            margin: 20px 80px;
            display: none;
            width: 70%;
        }

        #comments .bos {
            float: left;
            margin: 0 auto;
            width: 100%;
        }

        #comments .bos a {
            float: right;
            font-size: 14px;
        }

        #comments button {
            float: right;
        }

        #comments ul {
            border: none;
            border-radius: 0;
            box-shadow: none;
            background: #fff;
            width: 100%;
        }

        #comments ul li {
            width: 100%;
            border: 1px solid;
            margin-left: 70px;
            margin-top: 30px;
        }

        #comments ul li p {
            padding: 20px 10px;
            background: linear-gradient(45deg, rgb(160, 190, 117), rgb(255, 255, 255)) fixed;
        }

        #comments ul li #content {
            margin: 20px 50px;
        }

        #comments #btn {
            float: right;
            background-color: rgb(160, 190, 117);
            width: 100px;
            height: 25px;
            border: 1px solid rgb(160, 190, 117);
        }
    </style>
     <link rel="stylesheet" href="css/font-awesome.css">
     <script src="js/jquery-3.4.1.min.js"></script>
    <script>
         //评论功能的实现
        //点击评论栏出现消失事件
        $(function () {
            var comclickNum = 0
            $('#com').click(function () {
                if (comclickNum % 2 == 0) {
                    $('#comments').css('display', 'block')
                }
                else {
                    $('#comments').css('display', 'none')
                }
                comclickNum++
            })
            var collclickNum = 0
            $('#coll').click(function () {
                if (collclickNum % 2 == 0) {
                    $('#coll').css('color', 'orangered')
                }
                else {
                    $('#coll').css('color', 'black')
                }
                collclickNum++
            })
            var likeclickNum = 0
            $('#like').click(function () {
                var likeNum = parseInt($('#likeNum').text())
                if (likeclickNum % 2 == 0) {
                    $('#like').css('color', 'orangered')
                    likeNum++
                    $('#likeNum').text(likeNum)
                }
                else {
                    $('#like').css('color', 'black')
                    likeNum--
                    $('#likeNum').text(likeNum)
                }
                likeclickNum++
            })
        })
  //评论功能的实现
  $(function () {
            $('#btn').click(function () {
                if ($('#txt').val() == '') {
                    alert('发送内容不能为空')
                    return false;
                } else {
                    var content = $('#txt').val()
                    var newli = document.createElement('li');  //创建标签<li></li>
                    newli.innerHTML = '<p>' + localStorage.getItem('loginName') + '评论于' + new Date().toLocaleString() + '</p>' + '<div id="content">' + content + '<a id="rma" class="rma" href = "####">删除</a></div>';
                    $('#ul').prepend(newli)
                }
                $('#txt').val('')
                $('#rma').click(function () {
                    if (confirm('确认删除吗')) {
                        $(this).parents('li').remove()
                        return true;
                    }
                })
            })
        })


        $(function () {
            $('#secondnav').mouseover(function () {
                $('#choose').css('display', 'block')
            })
            $('#secondnav').mouseout(function () {
                $('#choose').css('display', 'none')
            })
        })

        $(function () {
            $('#down').mouseover(function () {
                $('#updown').css('display', 'block')
            })
            $('#down').mouseout(function () {
                $('#updown').css('display', 'none')
            })
        })
         
        //登录后显示当前用户
        window.onload = function () {
            if (localStorage.getItem('loginName')) {
                var links = document.querySelectorAll('#headright a')
                for (var i = 0; i < links.length; i++) {
                    links[i].style.display = 'none';
                }
                document.querySelector("#loginName").style.display = 'inline-block';
                document.querySelector("#unregister").style.display = 'inline-block';
                document.querySelector('#headright span').style.display = "none";
                document.querySelector('#loginName').innerHTML="当前账号："+'<a href="personal.html">'+localStorage.getItem('loginName')+'</a>'
            }
        }
        //注销事件
        function unregister() {
            localStorage.removeItem('loginName');
            location.replace('shouye.html')
        }
        //导航栏固定
        window.onscroll = function () {
            if (document.documentElement.scrollTop >= 80) {
                document.getElementById('bodynav').style.position = 'fixed';
                document.getElementById('bodynav').style.top = 0;
                document.getElementById('bodynav').style.left = 0;
            }
            else {
                document.getElementById('bodynav').style.position = 'static';
            }
        }
    </script>
</head>

<body>
    <div id="head">
        <div id="logo">
            <img src="images/logo1.jpg" alt="" width="200px" height="80px">
        </div>
        <div id="headleft">
            <div id="headleft1">
                <form action="#">
                    <input id="textword" type="text"><input id="textsearch" type="submit" value=" ">
                </form>
            </div>
        </div>
        <div id="headright">
            <a href="login.html" id="login">登录</a>
            <span>|</span>
            <a href="register.html" id="login">注册</a>
            <span id="loginName"></span>
            <button id="unregister" onclick="unregister()">注销</button>
        </div>
    </div>
    <div id="bodynav">
        <div id="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li id="secondnav"><a href="#">套餐</a>
                    <div id="choose">
                        <dl id="pep">
                            <dd>人数</dd>
                            <dd><a href="meetmenu2-3.html">2-3人</a></dd>
                            <dd><a href="#">4-6人</a></dd>
                            <dd><a href="#">7-8人</a></dd>
                        </dl>
                    </div>
                </li>
                <li id="down"><a href="#">健康饮食 </a>
                    <div id="updown">
                        <dl id="up">
                            <dd><a href="">人体群众</a></dd>
                            <dd><a href="laoren.html">老人</a></dd>
                            <dd><a href="">孕妇</a></dd>
                            <dd><a href="">青少年</a></dd>
                        </dl>
                    </div>
                </li>
                <li><a href="#">分享圈</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </div>
    </div>
    <div class="quanbu">
        <img src="images/2.png" alt="">
        <h3>火龙果花样饭团</h3>

        <ul>
            <li> 准备食材 大米：2杯（铁釜T5量杯），糯米：1小把，火龙果（红）：半个，果酱：适量，清水：适量。糯米加入的目的是为了使饭团更加粘糯。</li>
            <li>将大米和糯米漂洗干净后倒入电饭煲内胆。加水至刻度“2”。米和水的比例为1：1。最多不要超过1：1.1</li>
            <li>因为我们在米饭成熟后要拌入火龙果，如果米饭本身太软再加入水果就会过软而不好造型。我这里选择了“标准饭”“长米粒”选项，开始蒸制。您也可以按照您的习惯自行选择菜单。</li>
            <li>当米饭成熟后，将果肉泥分次拌到米饭中，看颜色均匀艳丽即可，不要一次加入过多果泥造成米饭过稀。取一块保鲜膜，取适量米饭摊成圆形，中间可按个人喜好放入少许果酱。 将保鲜膜束起扎紧，包起饭团。</li>
            <li>
                <ul>
                    <h4>烹饪技巧</h4>
                    <li> 1.米和水的比例为1：1。最多不要超过1：1</li>
                    <li>2.将果肉泥分次拌到米饭中，看颜色均匀艳丽即可，不要一次加入过多果泥造成米饭过稀。</li>
                </ul>
            </li>
        </ul>
        
        <div id="icon">
            <div><i class="fa fa-commenting-o fa-2x" aria-hidden="true" id="com"></i></div>
            <div><i class="fa fa-star-o fa-2x" aria-hidden="true" id="coll"></i></div>

        </div>
        <div id="comments">
            <div id="box" class="bos">
                <textarea name="" id="txt" cols="120" rows="10"></textarea>
                <button id="btn" class="fa fa-location-arrow ">发表评论</button>
                <ul id="ul"></ul>
            </div>
        </div>
    </div>

    </div>

</body>

</html>